<template>
    <ul>
        <li 
            v-for="product in products"
            :key="product.id">
            {{ product.title }} - {{ product.price }}
            <br>
            <button
                :disabled="!product.inventory"
                @click="addProductToCart(product)"
            >
            Add to Cart
            </button>

        </li>
    </ul>
</template>

<script setup>
import {  computed, onMounted } from 'vue'
import { useStore } from 'vuex'
const store = useStore();
const products = computed(()=>store.state.products.all);
onMounted(()=>{
    store.dispatch('products/getAllProducts');
})

const addProductToCart = (product) => {
    // 修改 dispatch action -> commit mutation
    // 共享 + 数据状态的正确性 
    // 这里设定加入购物车 即为购买 inventory-1 
    // cart + 1  
    store.dispatch('cart/addProductToCart',product);
}

</script>

<style lang="scss" scoped>

</style>